<template>
    <div>
      <!-- slot触发器 -->
      <div @click="open = true">
        <slot :date="date" />
      </div>
  
      <!-- 隐藏但不破坏上下文 -->
      <a-range-picker
          v-model:value="date"
          v-model:open="open"
          style="position: absolute; opacity: 0; pointer-events: none;"
          @openChange="handleOpenChange"
          @change="handleChange"
      />
    </div>
  </template>
  
  <script setup>
  import {ref} from "vue";
  
  const props = defineProps({
    modelValue: {
      type: [Object, String, null],
      default: null
    }
  });
  const emit = defineEmits(["update:modelValue", "change", "search"]);
  
  const date = ref(props.modelValue);
  const open = ref(false);
  
  const handleOpenChange = (status) => {
    open.value = status;
  };
  
  const handleChange = (val) => {
    emit("update:modelValue", val);
    emit("change", val);
    emit("search", val); // ✅ 用户修改时才触发
  };
  </script>
  